<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
        <style>
            html,
            body {
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
            }

            #app {
                width: 100%;
                height: 100%;
                background: black;
            }
            .container{
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding: 50px 0 0 0;
            }
            canvas{
                border: 1px solid #fff;
                margin: auto;
                display: block;
            }

          
        </style>
    </head>

    <body>
        <div id="app">
           <div class="container">
               <canvas id="canvas" width="800" height="800"></canvas>
           </div>
        </div>

        <script>
            class Point  {
                constructor({x,y,color,r}){
                    this.x = x
                    this.y = y
                    this.color = color
                    this.r = r
                    this.dx = Math.random() * 0.3
                    this.dy = ~~(Math.random() * 2 + 1)
                    this.ax = 1
                    this.oX = x
                    this.oY = y
                }
                render(ctx){
                    ctx.beginPath();
                    ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
                    ctx.shadowBlur=20;
                    ctx.shadowColor="black";
                    ctx.fillStyle=this.color;
                    ctx.fill();
                }
                update(){
                    this.x += this.dx * this.ax
                    this.y += this.dy

                    if(this.y % 300 === 0){
                        this.ax *= -1
                    }

                    if(this.y > 920){
                        this.x = this.oX
                        this.y = this.oY
                    }
                }
            }

            const vm = new Vue({
                el: '#app',
                data: {
                    pointList: [],
                    context:null
                },
                mounted() {
                    this.context = document.getElementById('canvas').getContext('2d')

                    for(let i=0;i<100;i++){
                        let point = new Point({x:this.random(0,800),y:this.random(-800,0),color:'#fff',r:this.random(5,7)})
                        this.pointList.push(point)
                    }

                    this.move()
                    
                },
                methods: {
                    move(){

                        // this.context.clearRect(0,0,800,800)
                        // this.context.globalAlpha = 0.09
                        // this.context.fillStyle = '#000'
                        // this.context.fillRect(0,0,800,800)
                        // this.context.globalAlpha = 1

                        this.pointList.forEach(point => {
                            point.update()
                            point.render(this.context)
                        });
                        requestAnimationFrame(this.move)
                    },
                    random(start, end) {
                        return Math.floor(Math.random() * (end - start) + start)
                    }
                }
            })

        </script>
    </body>

</html>